%div{ class: "#{index == 0 ? 'tab-pane active' : 'tab-pane' }", id: translation_key.id }
  %p
    .tabbable
      %ul.nav.nav-tabs
        
        %li.active
          %a.translations_tab{'data-key-id' => translation_key.id, "data-toggle" => "tab", :href => "#translations#{translation_key.id}"}
            %span.badge.badge-info.pull-left.translations_count{ id: "translations_#{translation_key.id}_count"}
              = translation_key.translations.in(to_lang).count
            %span
              = t('.translations')

        %li
          %a{"data-toggle" => "tab", :href => "#add_translations#{translation_key.id}"}
            = t('.add_edit_translation')
      .tab-content
        
        .tab-pane.active{ id: "translations#{translation_key.id}" }
          = render 'translation_center/translations/index', translations: translation_key.translations.order('created_at DESC').in(to_lang), translation_key: translation_key
        .tab-pane{ id: "add_translations#{translation_key.id}" }
          
          %em
            %b
              = t(translation_key.name)
          %hr
          %div{ class: "user_translation well well-small #{language_direction(to_lang)}", 'data-key-id' => translation_key.id }
            = current_user.translation_for(translation_key, to_lang).value
